<template>
  <ul class="switches">
    <li @click.stop="switchOne(index)" class="switch-item" v-for="(item, index) in switches" :class="{ active: index === switchIndex}" :key="index" >
      <span>{{item.name}} </span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'switches',
  props: {
    switches: {
      type: Array,
      default: () => { return [] }
    },
    switchIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    switchOne(ind) {
      this.$emit('switchOne', ind)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '~common/stylus/variable'
  @import '~common/stylus/mixin'

  .switches
    display: flex
    align-items: center
    width: 240px
    margin: 0 auto
    border: 1px solid $color-highlight-background
    border-radius: 5px
    .switch-item
      flex: 1
      padding: 8px
      text-align: center
      font-size: $font-size-medium
      no-wrap()
      color: $color-text-d
      &.active
        color: $color-text
        background: $color-highlight-background

</style>
